<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue/vue.js"></script>
</head>
<body>

<!--
   事件绑定
   1. 原生js  事件绑定
       1. 获取节点对象
       2. 编写回调函数
       3. 绑定节点事件  和回调函数建立关联
   2. vue    v-on:事件名="回调函数"       简化 @事件名="函数"
       2.1  鼠标事件
       2.2  键盘事件

       1. 事件如何绑定
       2. 回调函数在哪定义
       3. 如何改变data中的属性值

          1. 初始化vm实例时在data中配置的参数 会被vm实例进行数据代理  添加相同属性名在vm实例上
          2. 代理的属性值取决于data中的属性值    getAge(){}
          3. 改变代理属性值，本质时在改变data中对应的属性值   setAge(){}


-->
<div id="app">
    <h3>age:{{age}}</h3>
    <button v-on:click="addAge">+</button>
    <button v-on:click="subAge">-</button>
    <button v-on:click="addAgeByStep(2)">+n</button>
<!--    事件简化写法-->
    <button @click="subAgeByStep(2)">-n</button>
<!--    键盘事件-->
    <p><input type="text" @keydown="showMessage"></p>
</div>

<script>
    let vm = new Vue({
        el: '#app',
        data: {
            age: 20,
            message: 'hello'
        },
        methods: {
            addAge: function () {
                /*
                *  //vm
                console.log(vm)
                // 通过访问对象中的隐藏属性  实现age参数的获取  不推荐
                console.log('vm._data.age=',vm._data.age)
                //获取代理属性
                console.log(vm.age)
                console.log(vm.message)
                // this  和 vm 是不是同一个对象    true
                console.log(this==vm)
                console.log(this.age)
                console.log(this.message)
                * */

                //  getAge   setAge
                this.age += 1
            },
            // es6 定义函数的新语法
            subAge() {
                this.age -= 1
            },
            addAgeByStep(step) {
                this.age += step
            },
            subAgeByStep(step) {
                this.age -= step
            },
            showMessage(event){
                console.log(event)
            }
        }
    })
</script>

</body>
</html>
